<template>
	<view class="content flex flex-col items-center">
		<image class="bg" :src="$util.img(main.image)" mode=""></image>
		<view class="bs"></view>
		<view class="main flex flex-col justify-center items-center">
			<view class="main-menu flex flex-col justify-start items-center w100">
				<view class="flex flex-row mt_20 justify-between w100 items-center">
					<view class="m_left">
						<image src="../../static/image/telicon@2x.png" mode="widthFix"></image>
						<text class="f_28 c_3d">{{main.mobile}}</text>
					</view>
					<text class="f_24 c_blue" @tap="callphone(main.mobile)">点击拨打</text>
				</view>
				<view class="flex flex-row mt_20 justify-between w100 items-center">
					<view class="m_left">
						<image src="../../static/image/wechaticon@2x.png" mode="widthFix"></image>
						<text class="f_28 c_3d">{{main.wechat}}</text>
					</view>

				</view>

				<view class="flex flex-row mt_20 justify-between w100 items-center" v-if="main.email!=''">
					<view class="m_left">
						<image src="../../static/image/emailcon@2x.png" mode="widthFix"></image>
						<text class="f_28 c_3d">{{main.email}}</text>
					</view>

				</view>
				<view class="flex flex-row mt_20 justify-between w100 items-center">
					<view class="m_left">
						<image src="../../static/image/adressicon@2x.png" mode="widthFix"></image>
						<text class="f_28 c_3d">{{main.address}}</text>
					</view>

					<text class="f_24 c_blue" @tap="openmap">地图导航</text>
				</view>
			</view>

			<view class="main-menu mt_20">
				<rich-text :nodes="main.content"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import http from 'common/js/http.js';

	export default {
		mixins: [http],
		data() {
			return {
				main: {},
			}
		},
		onLoad() {
			this.getmain()
		},
		methods: {
			openmap(){
				// 导航
				uni.openLocation({
							latitude: this.main.latitude,
							longitude: this.main.longitude,
							name:this.main.name,
							address:this.main.address,
							success: function () {
								console.log('success');
							}
						});
			},
			callphone(e) {
				uni.makePhoneCall({
					phoneNumber:e,
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			},
			getmain() {
				this.sendRequest({
					url: 'cun/towndetail',
					data: {
						id: 1
					},
					success: res => {
						console.log(res)
						if (res.code > 0) {
							
							
							
							this.main = res.data
							console.log(this.main.content)
							
						

						}
					}
				})
			},
		}
	}
</script>


<style lang="scss">
 table {
	  border-collapse: collapse; /* 合并相邻边框 */
	}
	 
	 td,  th {
	  border: 1px solid #000; /* 设置边框样式及颜色 */
	  padding: 5px; /* 调整单元格间距 */
	}
	.content {

		width: 100%;

		.bg {
			width: 100%;
			height: 384rpx;
		}

		.bs {
			width: 100%;
			height: 258rpx;
			background: linear-gradient(180deg, rgba(249, 249, 249, 0) 0%, #F9F9F9 100%);
			position: absolute;
			top: 128rpx;
			left: 0;
		}

		.main {
			position: absolute;
			top: 250rpx;
			left: 0;
			width: 100%;

		}

		.main-menu {}

		.main-menu {
			width: 710rpx;
			padding: 40rpx;

			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		.m_left {
			image {

				width: 24rpx;
				height: 24rpx;
				border-radius: 4rpx;
				margin-right: 10rpx;
			}

		}

		.f_28 {
			width: 450rpx;
			display: inline-flex;

		}
	}
</style>